<template>
  <div
    class="basic"
    v-loading="loading"
    element-loading-background="rgba(255, 255, 255, 0)"
  >
    <el-form
      ref="form"
      :model="actDetails"
      :rules="rules"
      label-width="120px"
      class="form"
    >
      <el-form-item label="活动名称" prop="title">
        <el-input v-model="actDetails.title" @change="handleTitle"></el-input>
      </el-form-item>
      <el-form-item label="投票开始时间" prop="beginTime">
        <el-date-picker
          v-model="actDetails.beginTime"
          type="datetime"
          placeholder="选择开始时间"
          @change="handleBeginTime"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="投票结束时间" prop="endTime">
        <el-date-picker
          v-model="actDetails.endTime"
          type="datetime"
          placeholder="选择结束时间"
          @change="handleEndTime"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="滚动公告">
        <el-switch v-model="notice.enabled" @change="handleEnabled"></el-switch>
        <el-input
          v-model="notice.context"
          type="textarea"
          v-show="notice.enabled"
          placeholder="请输入活动公告"
          @change="handleContext"
          style="margin-top: 10px"
        ></el-input>
      </el-form-item>
      <el-form-item label="关闭活动">
        <el-switch
          v-model="actDetails.enabled"
          @change="handleEnabledAct"
        ></el-switch>
      </el-form-item>
      <el-form-item label="称谓设置" class="subForm">
        <div class="subFormItem">
          <span>选手名称</span>
          <el-tooltip
            :visible-arrow="false"
            class="item"
            effect="light"
            placement="right"
            popper-class="popper-box"
            content="最多三个中文，投票页选项的称谓，例如选手、企业、作品等，投票页上会对应显示"
          >
            <i class="iconfont iconwenhao"></i>
          </el-tooltip>
          <el-input
            style="width: 200px"
            v-model="actDetails.contestantCategory"
            class="input"
            @change="handleContestantCategoryInput"
          >
          </el-input>
          <el-select
            @change="handleContestantCategorySelect"
            v-model="actDetails.contestantCategory"
            class="select"
          >
            <el-option
              v-for="(item, index) in categoryArr"
              :key="index"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </div>
        <div class="subFormItem">
          <span>选手单位</span>
          <el-tooltip
            :visible-arrow="false"
            class="item"
            effect="light"
            placement="right"
            popper-class="popper-box"
            content="最多1个中文，例如个、位、幅等。用于描述选项个数时使用，例如“最多选择5幅作品”中的“幅”,“每位选手”中的“位”等"
          >
            <i class="iconfont iconwenhao"></i>
          </el-tooltip>

          <el-input
            style="width: 200px"
            v-model="actDetails.contestantCategoryUnit"
            class="input"
            @change="handleContestantCategoryUnitInput"
          >
          </el-input>
          <el-select
            @change="handleContestantCategoryUnitSelect"
            v-model="actDetails.contestantCategoryUnit"
            class="select"
          >
            <el-option
              v-for="(item, index) in categoryunitArr"
              :key="index"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </div>
        <div class="subFormItem">
          <span>按钮名称</span>
          <el-tooltip
            :visible-arrow="false"
            class="item"
            effect="light"
            placement="right"
            popper-class="popper-box"
            content="最多两个中文，投票按钮的称谓，例如点赞、投票、支持等，投票按钮上会对应显示"
          >
            <i class="iconfont iconwenhao"></i>
          </el-tooltip>
          <el-input
            style="width: 200px"
            v-model="actDetails.type"
            class="input"
            @change="handleTypeInput"
          >
          </el-input>
          <el-select
            @change="handleTypeSelect"
            v-model="actDetails.type"
            class="select"
          >
            <el-option
              v-for="(item, index) in typeArr"
              :key="index"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </div>
        <div class="subFormItem">
          <span>票数单位</span>
          <el-tooltip
            :visible-arrow="false"
            class="item"
            effect="light"
            placement="right"
            popper-class="popper-box"
            content="最多1个中文，例如个、票、位等。用于描述票数量时使用，例如“有100赞”中的“赞”,“有100票”中的“票”等"
          >
            <i class="iconfont iconwenhao"></i>
          </el-tooltip>
          <el-input
            style="width: 200px"
            v-model="actDetails.unit"
            class="input"
            @change="handleUnitInput"
          >
          </el-input>
          <el-select
            @change="handleUnitSelect"
            v-model="actDetails.unit"
            class="select"
          >
            <el-option
              v-for="(item, index) in unitArr"
              :key="index"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { formatDate } from "@/utils/filter";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      actDetails: {}, //活动信息
      notice: {}, //公告
      categoryArr: [], //选手类别
      categoryunitArr: [], //选手类别单位
      typeArr: [], //按钮名称类型
      unitArr: [], //票数单位
      rules: {
        title: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
        beginTime: [
          {
            type: "date",
            required: true,
            message: "选择活动开始时间",
            trigger: "change",
          },
        ],
        endTime: [
          {
            type: "date",
            required: true,
            message: "选择活动结束时间",
            trigger: "change",
          },
        ],
      },
      begin: "",
      end: "",
    };
  },
  computed: {
    ...mapGetters("status", {
      loading: "loading",
    }),
  },
  created() {
    this.getActDetail();
    this.getNotice();
    this.category();
    this.categoryunit();
    this.type();
    this.unit();
  },
  methods: {
    //获取活动信息
    getActDetail() {
      this.$api("vote.actById", {
        id: this.$route.query.id,
      }).then((res) => {
        res.beginTime = new Date(res.beginTime);

        res.endTime = new Date(res.endTime);
        this.begin = res.beginTime;
        this.end = res.endTime;
        this.actDetails = res;
        console.log(this.actDetails, "111");
      });
    },
    //获取公告
    getNotice() {
      this.$api("vote.notice", {
        voteId: this.$route.query.id,
      }).then((res) => {
        this.notice = res;
      });
    },
    //获取选手类别
    category() {
      this.$api("vote.category").then((res) => {
        this.categoryArr = res;
      });
    },
    //获取选手类别单位
    categoryunit() {
      this.$api("vote.categoryunit").then((res) => {
        this.categoryunitArr = res;
      });
    },
    //按钮名称类型
    type() {
      this.$api("vote.type").then((res) => {
        this.typeArr = res;
      });
    },
    //票数单位
    unit() {
      this.$api("vote.unit").then((res) => {
        this.unitArr = res;
      });
    },
    //修改立即保存
    saveApi() {
      this.$api("vote.save", {
        title: this.actDetails.title,
        introduction: this.actDetails.introduction,
        contestantCategory: this.actDetails.contestantCategory.trim(),
        contestantCategoryUnit: this.actDetails.contestantCategoryUnit.trim(),
        id: this.actDetails.id,
        type: this.actDetails.type,
        unit: this.actDetails.unit,
        beginTime: formatDate(this.actDetails.beginTime),
        endTime: formatDate(this.actDetails.endTime),
        enabled: this.actDetails.enabled,
      })
        .then((res) => {
          this.$store.commit("status/SET_URL", new Date().getTime());
          console.log(res);
          this.getActDetail()
          this.$message({
            message: "保存成功",
            type: "success",
            duration: 1000,
          });
        })
        .catch((err) => {
          console.log(err);
        });
      // const beginTime = new Date(this.actDetails.beginTime).getTime();
      // const endTime = new Date(this.actDetails.endTime).getTime();
      // if (beginTime > endTime) {
      //   this.$message({
      //     message: "活动开始时间不能大于活动结束时间",
      //     duration: 1000,
      //     type: "error",
      //   });
      //   this.actDetails.beginTime = this.begin;
      //   this.actDetails.beginTime = this.begin;
      // } else {

      // }
    },
    //保存公告
    saveNotice() {
      this.$api("vote.setNotice", {
        ...this.notice,
        context: this.notice.context.trim(),
        voteId: this.$route.query.id,
      }).then((res) => {
        console.log(res);
        this.$store.commit("status/SET_URL", new Date().getTime());
        this.$message({
          message: "保存成功",
          type: "success",
          duration: 1000,
        });
      });
    },
    //活动名称
    handleTitle() {
      if (this.actDetails.title.trim()) {
        this.saveApi();
      }
    },
    //投票开始时间
    handleBeginTime() {
      if (this.actDetails.beginTime) {
        const beginTime = new Date(this.actDetails.beginTime).getTime();
        const endTime = new Date(this.actDetails.endTime).getTime();
        if (beginTime > endTime) {
          this.$message({
            message: "活动开始时间不能大于活动结束时间",
            duration: 1000,
            type: "error",
          });
          this.actDetails.beginTime = this.begin;
        } else {
          this.saveApi();
        }
      }
    },
    //投票结束时间
    handleEndTime() {
      if (this.actDetails.endTime) {
        const beginTime = new Date(this.actDetails.beginTime).getTime();
        const endTime = new Date(this.actDetails.endTime).getTime();
        if (beginTime > endTime) {
          this.$message({
            message: "活动开始时间不能大于活动结束时间",
            duration: 1000,
            type: "error",
          });
          this.actDetails.endTime = this.end;
        } else {
          this.saveApi();
        }
      }
    },
    //滚动公告
    handleEnabled() {
      this.saveNotice();
    },
    handleEnabledAct() {
      this.saveApi();
    },
    handleContext() {
      this.saveNotice();
    },
    //称谓设置
    //选手名称
    handleContestantCategoryInput() {
      if (this.actDetails.contestantCategory.trim()) {
        this.saveApi();
      }
    },
    handleContestantCategorySelect() {
      this.saveApi();
    },
    //选手单位
    handleContestantCategoryUnitInput() {
      if (this.actDetails.contestantCategoryUnit.trim()) {
        this.saveApi();
      }
    },
    handleContestantCategoryUnitSelect() {
      this.saveApi();
    },
    //按钮名称
    handleTypeInput() {
      if (this.actDetails.type.trim()) {
        this.saveApi();
      }
    },
    handleTypeSelect() {
      this.saveApi();
    },
    //票数单位
    handleUnitInput() {
      if (this.actDetails.unit.trim()) {
        this.saveApi();
      }
    },
    handleUnitSelect() {
      this.saveApi();
    },
  },
};
</script>
<style lang="scss">
.el-tooltip__popper.popper-box {
  border-color: #e4e4e4;
  max-width: 400px;
  padding: 5px;
  line-height: 18px;
}
</style>
<style lang="scss" scoped>
.basic {
  width: 820px;
  min-height: 550px;

  .form {
    ::v-deep.el-input__inner {
      border-radius: 30px;
      width: 700px;
    }
    ::v-deep.el-textarea__inner {
      border-radius: 20px;
      resize: none;
    }
    .subForm {
      .subFormItem {
        width: 350px;
        display: inline-block;
        margin-bottom: 15px;
        ::v-deep.el-input__inner {
          font-size: 14.2px;
        }
        span {
          margin-left: 35px;
          color: $deactiveColor;
        }
        .iconwenhao {
          margin-left: 5px;
          color: $deactiveColor;
          cursor: pointer;
        }
        .input {
          margin-left: 35px;
          ::v-deep.el-input__inner {
            border-radius: 5px 0 0 5px;
            width: 150px;
          }
        }
        .select {
          margin-left: -50px;
          ::v-deep.el-input__inner {
            border-left: none;
            border-radius: 0 5px 5px 0;
            background-color: #f5f7fa;
            width: 30px;
          }
          ::v-deep .el-input.is-focus .el-input__inner {
            border-color: #dcdfe6;
          }
          ::v-deep .el-input .el-select__caret {
            margin-left: -35px;
          }
          ::v-deep.el-input__inner:focus {
            border-color: #dcdfe6;
          }
        }
      }
    }
  }
}
</style>
